<template>
    <!-- 此部分为页面的模板结构，用于定义页面的HTML布局和数据绑定 -->
    <!-- 商品展示区域的外层容器 -->
    <view class="">
        <!-- 展示商品图片的元素，通过绑定 :src 属性，将 item.img 的值作为图片的源地址，
             mode 属性用于指定图片的展示模式（此处未设置具体值） -->
        <image class="good-img" :src="item.img" mode=""></image>
    </view>
    <view class="good">
        <!-- 展示商品标题的文本元素，通过Vue的插值表达式 {{}} 将 item.name 的值渲染到页面上，显示商品名称 -->
        <text class="good-title">{{item.name}}</text><br>
        <!-- 价钱相关信息展示区域 -->
        <view class="good-price">
            <!-- 显示活动优惠信息的文本元素，此处显示固定文本“活动优惠 9折”，可能后续会根据实际业务逻辑进行动态修改 -->
            <text class="error"> 活动优惠 9折</text>
        </view>
        <!-- 商品相关统计信息（月销、收藏、浏览量）展示区域 -->
        <view class="good-static">
            <!-- 展示月销量的文本元素，通过使用JavaScript的 Math.random() 函数生成随机数，
                 并结合 Math.floor() 取整后绑定到页面上，模拟月销量数据（实际应该从后端获取准确数据） -->
            <text class="good-static-text">月销：{{Math.floor(Math.random()*10000)}}</text>
            <!-- 展示收藏量的文本元素，同样通过随机数模拟收藏量数据 -->
            <text class="good-static-text">收藏：{{Math.floor(Math.random()*10000)}}</text>
            <!-- 展示浏览量的文本元素，也是利用随机数来模拟浏览量数据 -->
            <text class="good-static-text">浏览：{{Math.floor(Math.random()*10000)}}</text>
        </view>
    </view>
    <view class="good-intro-box">
        <!-- 美食介绍标题文本元素 -->
        <text class="good-intro-title">美食介绍</text><br>
        <!-- 展示美食详细介绍内容的文本元素，通过插值表达式将 item.intro 的值渲染出来，显示具体介绍信息 -->
        <text class="good-intro">{{item.intro}}</text>
    </view>
    <!-- 评价相关信息展示区域的标题部分，使用 uni-section 组件展示评价的数量和好评率等信息，
         通过设置 title、type、titleFontSize、padding 等属性来定义其外观和布局 -->
    <uni-section title="评价(1003) &nbsp;&nbsp;&nbsp;&nbsp; 好评率98.5%" type="line" titleFontSize="18px" padding />
    <view class="comment-box">
        <!-- 通过 v-for 指令循环遍历 pinlun 数组，生成多个评论项，每个评论项对应数组中的一个元素，
             "item" 是数组元素的别名，"index" 是对应的索引值 -->
        <view class="comment" v-for="(item,index) in pinlun">
            <!-- 展示评论用户头像的图片元素，通过绑定 :src 属性将 item.img 的值作为头像图片源地址，
                 mode 属性用于指定图片展示模式（此处未设置具体值） -->
            <image class="comment-avatar" :src="item.img" mode=""></image>
            <view class="comment-right">
                <!-- 展示评论用户名称的文本元素，通过插值表达式将 item.username 的值渲染出来，显示用户名 -->
                <text class="comment-name">{{item.username}}</text>
                <!-- 展示评论内容的文本元素，通过插值表达式将 item.intro 的值渲染出来，显示具体评论内容 -->
                <text class="comment-content">{{item.intro}}</text>
                <!-- 展示评论时间的文本元素，通过插值表达式将 item.createdAt 的值渲染出来，显示评论的时间 -->
                <text class="comment-date">时间:{{item.createdAt}}</text>
            </view>
        </view>
    </view>

</template>

<script setup>
    // 从Vue框架中引入 ref 和 computed 函数，ref 用于创建响应式数据，computed 用于创建计算属性
    import {
        ref,
        computed
    } from 'vue'
    // 引入 uni-app 中的 onLoad 生命周期钩子函数，用于在页面加载时执行相关操作
    import {
        onLoad
    } from '@dcloudio/uni-app'
    // 引入配置文件（可能包含如接口地址等相关配置信息），此处具体导入的是 CONFIG 对象，应该在 config.js 文件中定义
    import {
        CONFIG
    } from '../../utils/config.js'
    // 引入用户状态管理相关的 store（可能基于Vuex或类似的状态管理模式），用于获取和操作用户相关的状态信息
    import {
        userStore
    } from '../../store/userStore';
    // 获取 userStore 的实例，通过这个实例可以访问存储中的各种用户相关状态和数据
    let store = userStore()

    // 创建一个名为 item 的响应式对象，初始为空对象，后续会用于存储商品的详细信息，
    // 通过响应式数据绑定，其变化会自动更新到模板中相关的DOM元素上
    let item = ref({})
    // 在页面加载时触发的函数，接收页面传递过来的数据（data）作为参数
    onLoad((data) => {
        // 调用 getItemByid 函数，根据传入的 id 获取商品详情信息，此处应该是从后端获取数据
        getItemByid(data.id)
        // 调用 getpinlun 函数，获取商品的评论信息，同样是从后端获取相关数据
        getpinlun()
    })
    // 根据传入的 id 参数从后端获取商品详细信息的异步函数
    async function getItemByid(id) {
        // 构造一个包含 objectId 的数据对象，用于向后台接口传递参数，此处 objectId 应该是商品的唯一标识
        let data = {
            "objectId": id
        }
        // 对构造的数据对象进行 URI 编码，将其转换为符合URL规范的字符串格式，以便在网络请求中传递
        let ed = encodeURI(JSON.stringify(data))
        // 使用 uni.$get 方法发起异步 HTTP GET 请求（应该是基于 uni-app 封装的请求方法），
        // 向指定的后台接口地址（CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed）发送请求，
        // 并等待响应返回
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
        // 将获取到的响应结果中的第一条数据（假设返回的是一个数组形式的结果集）赋值给 item.value，
        // 从而更新商品详细信息的响应式数据，触发模板的重新渲染
        item.value = res.results[0]
        // 在控制台打印商品详细信息，用于调试查看数据是否正确获取
        console.log(item.value)
        // 设置当前页面的导航栏标题为商品名称，通过修改导航栏标题展示当前商品详情页对应的商品名
        uni.setNavigationBarTitle({
            title: item.value.name
        })
        // 在控制台打印用户当前位置信息（从 store.currentPos 获取）以及商品的经纬度信息（从 item.value.lat 和 item.value.lon 获取），
        // 可能用于调试或者后续基于位置的相关业务逻辑处理
        console.log(store.currentPos)
        console.log(item.value.lat, item.value.lon)

    }
    // 用于存储商品评论信息的响应式数组，初始为空数组，后续会将从后端获取到的评论数据填充到这个数组中
    let pinlun = ref([])
    // 异步函数，用于从后端获取商品的评论信息
    async function getpinlun() {
        // 使用 uni.$get 方法发起异步 HTTP GET 请求，向指定的后台接口地址（CONFIG.leancloud_url + "/1.1/classes/pinglunqu"）发送请求，
        // 并等待响应返回
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/pinglunqu")
        // 将获取到的响应结果赋值给 pinlun.value，更新评论信息的响应式数据，使得模板中与评论相关的DOM元素能够根据新数据重新渲染
        pinlun.value = res.results
        // 在控制台打印评论信息数据，用于调试查看数据是否正确获取
        console.log(pinlun.value)
    }


</script>


<style lang="scss">
    /* 商品图片的样式规则 */
   .good-img {
        /* 设置图片宽度占满父元素，实现自适应宽度效果 */
        width: 100%;
        /* 设置图片高度为400px */
        height: 400px;
        /* 将图片设置为块级元素，使其可以通过 margin:auto 实现水平居中显示 */
        display: block;
        /* 设置上下外边距为 auto，使图片在水平方向上居中显示 */
        margin: auto;
    }

   .good {
        /* 设置宽度占满父元素 */
        width: 100%;
        /* 设置高度占满父元素 */
        height: 100%;

       .good-price {
            /* 使用flex布局，使内部元素在水平方向上排列 */
            display: flex;
            /* 设置内部元素沿主轴方向（水平方向）排列 */
            flex-direction: row;
            /* 使内部元素在交叉轴（垂直方向）上居中对齐 */
            align-items: center;
            /* 设置上下外边距为15px，实现一定的间距效果 */
            margin: 15px 0;

           .good-price1 {
                /* 设置文字颜色为橙色 */
                color: orange;
                /* 设置字体大小为16px */
                font-size: 16px;
            }

           .good-price2 {
                /* 设置文字颜色为灰色 */
                color: #c3c3c3;
                /* 添加删除线样式 */
                text-decoration-line: line-through;
                /* 设置字体大小为14px */
                font-size: 14px;
                /* 设置左右外边距为10px，调整元素位置 */
                margin: 0 10px;
            }

           .error {
                /* 设置文字颜色为白色 */
                color: white;
                /* 设置边框样式，1px 宽的红色实线边框 */
                border: 1px solid red;
                /* 设置边框圆角为5px，实现圆角效果 */
                border-radius: 5px;
                /* 设置背景颜色为红色 */
                background-color: red;
            }
        }

       .good-static {
            /* 使用flex布局，使内部元素在水平方向上排列 */
            display: flex;
            /* 设置内部元素沿主轴方向（水平方向）排列 */
            flex-direction: row;
            /* 使内部元素在主轴方向上均匀分布，两端对齐 */
            justify-content: space-between;

           .good-static-text {
                /* 设置文字颜色为灰色 */
                color: #c3c3c3;
                /* 设置字体大小为12px */
                font-size: 12px;
            }
        }
    }

   .kilometer {
        /* 设置宽度占满父元素 */
        width: 100%;
        /* 设置字体大小为18px */
        font-size: 18px;
        /* 设置字体加粗 */
        font-weight: bold;
        /* 设置边框样式，1px 宽的灰色实线边框 */
        border: 1px solid grey;
        /* 设置边框圆角为10px，实现圆角效果 */
        border-radius: 10px;
        /* 设置背景颜色为灰色 */
        background-color: #c3c3c3;
    }

   .kilometer_span {
        /* 设置边框样式，1px 宽的橙色实线边框 */
        border: 1px solid orange;
        /* 设置边框圆角为10px，实现圆角效果 */
        border-radius: 10px;
        /* 设置背景颜色为橙色 */
        background-color: orange;
        /* 设置文字颜色为红色 */
        color: red;
    }

   .good-intro-box {
        /* 设置顶部外边距为20px，与上方元素拉开一定距离 */
        margin-top: 20px;
        /* 设置高度占满父元素 */
        height: 100%;
    }

   .good-title {
        /* 设置字体大小为28px */
        font-size: 28px;
        /* 设置文字颜色为黑色 */
        color: black;
    }

   .good-intro-title {
        /* 设置高度占满父元素 */
        height: 100%;
        /* 设置字体大小为45rpx（rpx是小程序中相对长度单位，可自适应不同屏幕尺寸） */
        font-size: 45rpx;
        /* 设置文字颜色为粉色（#fa436a） */
        color: #fa436a;
    }

   .good-intro {
        /* 设置顶部外边距为20px，与上方元素拉开一定距离 */
        margin-top: 20px;
        /* 设置左边外边距为15px，调整元素位置 */
        margin-left: 15px;
        /* 设置字体大小为30rpx */
        font-size: 30rpx;
        /* 设置文字颜色为灰色 */
        color: #909399;
    }

    // 评价相关的样式规则
   .comment-box {
        /* 设置边框样式，1px 宽的灰色实线边框 */
        border: 1px solid gray;

       .comment {
            /* 使用flex布局，使内部元素在水平方向上排列 */
            display: flex;
            /* 设置内部元素沿主轴方向（水平方向）排列 */
            flex-direction: row;
            /* 设置上下外边距为15px，实现一定的间距效果 */
            margin: 15px 0;


           .comment-avatar {
                /* 设置头像图片宽度为500px */
                width: 500px;
                /* 设置头像图片高度为60px */
                height: 60px;
                /* 设置边框圆角为50px，使头像呈现圆形外观 */
                border-radius: 50px;
                /* 设置右边外边距为15px，与右侧元素拉开一定距离 */
                margin-right: 15px
            }

           .comment-right {
                /* 设置内部元素沿主轴方向（垂直方向）排列 */
                flex-direction: column;
                /* 使内部元素在主轴方向上均匀分布，两端对齐 */
                justify-content: space-between;

               .comment-name {
                    /* 设置文字加粗 */
                    font-weight: bold;
                }

               .comment-content {
                    /* 设置上下外边距为5px，调整元素位置 */
                    margin: 5px 0;
                    /* 设置字体大小为12px */
                    font-size: 12px;
                    /* 设置文字颜色为灰色 */
                    color: grey;
                    /* 设置首行缩进1个字符宽度，用于段落排版 */
                    text-indent: 1em;
                    /* 当内容超出容器范围时，隐藏超出部分 */
                    overflow: hidden;
                    /* 设定文本显示的行数为5行，超出部分将被截断 */
                    -webkit-line-clamp: 5;
                    /* 超出部分用省略号表示 */
                    text-overflow: ellipsis;
                    /* 使用-webkit-box来实现多行文本截断显示效果，需要配合 -webkit-line-clamp 和 text-overflow 属性使用 */
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }

               .comment-date {
                    /* 设置文字颜色为浅灰色 */
                    color: #c9c9c9;
                    /* 设置字体大小为12px */
                    font-size: 12px
                }
            }
        }
    }
</style>
